<template>
  <div class="container">
    <!-- 头部 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right"  v-if="UrlData.name">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ UrlData.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 表单 -->
      <div class="from">
        <el-form :inline="true" :model="searchList" class="formtop">
          <el-form-item label="目录名称">
            <el-input v-model="searchList.tagName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchList.state" placeholder="请选择">
              <el-option label="已启用" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btnClear">清除</el-button>
            <el-button type="primary" @click="btnsearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="addtages">
          <el-button  type="text" @click="toPath"  v-if="UrlData.name">←返回学科</el-button>
          <el-button type="success" @click="addDirectorys">新增标签</el-button>
        </div>
      </div>
      <div class="icon">
        <i class="el-icon-info">数据一共{{ PageData.counts }}条</i>
      </div>
    </el-card>
    <!-- 标签数据 -->
    <div>
      <el-table :data="list" style="width: 100%">
        <!-- 序号 -->
        <el-table-column prop="date" label="序号" type="index">
        </el-table-column>
        <!-- 学科 -->
        <el-table-column prop="subjectName" label="学科"> </el-table-column>
        <!-- 标签名称 -->
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <!-- 创建者 -->
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <!-- 创建日期 -->
        <el-table-column label="创建日期">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <!-- 状态 -->
        <!-- <el-table-column prop="state" label="状态" :formatter="formatterHireType">
        </el-table-column> -->
        <el-table-column prop="state" label="状态">
          <template v-slot="{ row }">
            {{ row.state | hireType }}
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="date" label="操作" v-slot="row">
          <el-button size="mini" type="text" @click="btnState({ row })"
            >{{row.row.state === 1 ? '禁用' : '启用'}}</el-button
          >
          <el-button
            size="mini"
            type="text"
            :disabled="row.row.state === 1 ? true : false"
            @click="btnedit({ row })"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            :disabled="row.row.state === 1 ? true : false"
            @click="btnremove(row)"
            >删除</el-button
          >
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        class="page-Tool"
        background
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
        :paginationPage="PageData.pages"
        :total="PageData.counts"
        :paginationPagesize="PageData.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        layout="prev, pager, next, sizes, jumper"
      >
      </el-pagination>
    </div>
    <!-- 新增弹出层 -->
    <el-dialog
      title="新增标签"
      :visible.sync="addshow"
      width="30%"
      :before-close="btnclear"
    >
      <el-form  inline>
        <!-- 下拉框 -->
        <el-form-item label="所属学科">
          <el-select v-model="subjectList.subjectName" placeholder="请选择">
            <el-option
              v-for="(item,index) in subjectList"
              :key="index"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-input
            v-model="formData.tagName"
            autocomplete="off"
            placeholder="请输入科目名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnclear">取 消</el-button>
        <el-button type="primary" @click="addtags">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹出层 -->
    <el-dialog
      title="修改目录"
      :visible.sync="editshow"
      width="30%"
      :before-close="btnclear"
    >
      <el-form v-model="editData" inline>
        <!-- 修改下拉框 -->
        <el-form-item label="所属学科">
          <el-select v-model="editData.subjectName" placeholder="请选择">
            <el-option
              v-for="item in subjectList"
              :key="item.subjectID"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-input
            v-model="editData.tagName"
            autocomplete="off"
            placeholder="请输入科目名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnclear">取 消</el-button>
        <el-button type="primary" @click="editsubject()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list as tags, update as updatetags, changeState, remove, add as addtags } from '@/api/hmmm/tags'
import { status } from '@/api/hmmm/constants.js'
import { list as subjects } from '@/api/hmmm/subjects.js'

export default {
  filters: {
    hireType (val) {
      const f = status.find(t => t.value === val)
      // console.log('f->', f)
      return f ? f.label : '未知'
    }
  },
  data () {
    return {
      subjectList: [],
      list: [],
      searchlist: [],
      // 新增表单
      formData: {
        subjectID: '', // 学科ID
        directoryName: '', // 目录名称
        subjectName: '',
        tagName: ''
      },
      // 修改表单
      editData: {
        tagName: '',
        subjectID: '',
        subjectName: '',
        id: ''
      },
      UrlData: {
        id: '',
        name: ''
      },
      // 修改状态
      changeStateList: {
        id: '',
        state: ''
      },
      PageData: {
        page: null, // 页码
        pages: null, // 分页数量
        pagesize: null, // 页容量
        counts: null // 总数
      },
      searchList: {
        tagName: '',
        state: ''
      },
      // 新增学科
      addsubjectList: {
        subjectID: '',
        tagName: ''
      },
      addshow: false, // 新增弹出框
      editshow: false // 修改弹出框
    }
  },
  created () {
    this.getTageList()
    this.getSubject()
    this.geturlname()
  },
  methods: {
    // 获取url上面额值
    geturlname () {
      this.UrlData.id = this.$route.query.id
      this.UrlData.name = this.$route.query.name
      console.log(this.UrlData)
    },
    // 获取列表
    async getTageList () {
      try {
        const { data: res } = await tags(this.PageData)
        this.list = res.items
        console.log(res)
        this.PageData.page = res.page
        this.PageData.pages = res.pages
        this.PageData.pagesize = res.pagesize
        this.PageData.counts = res.counts
        this.searchlist = this.items
        if (res.page > res.pages) {
          this.onPageChange(+res.pages)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 切换页面
    onPageChange (newPage) {
      this.PageData.page = newPage
      this.getTageList()
    },
    // 每页显示信息条数
    onPageSizeChange (newpagesize) {
      this.PageData.pagesize = newpagesize
      this.getTageList()
    },
    // 获取学科列表
    async getSubject () {
      try {
        const { data: res } = await subjects()
        console.log('subject->', res)
        this.subjectList = res.items
        console.log(this.subjectList)
      } catch (error) {
        console.log(error)
      }
    },
    // 显示新增学科目录
    addDirectorys () {
      this.addshow = true
    },
    // 添加标签
    async addtags (row) {
      console.log(row)
      this.addsubjectList.subjectID = this.subjectList.subjectName
      this.addsubjectList.tagName = this.formData.tagName
      console.log(this.addsubjectList)
      await addtags(this.addsubjectList)
      this.$message.success('新增成功')
      this.getTageList()
      this.btnclear()
    },
    // 取消 关闭
    btnclear () {
      this.addshow = false
      this.formData = {}
      this.editData.tagName = ''
      this.editData.subjectID = ''
      this.editData.subjectName = ''
      this.editData.id = ''
      this.editshow = false
    },
    // 搜索学科
    async  btnsearch () {
      console.log(this.searchList)
      // console.log(val)
      const req = {}
      Object.keys(this.searchList).filter(i => this.searchList[i]).forEach(i => { req[i] = this.searchList[i] })
      try {
        const { data: res } = await tags(req)
        this.PageData.page = res.page
        this.PageData.pages = res.pages
        this.PageData.pagesize = res.pagesize
        this.PageData.counts = res.counts
        this.list = res.items
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    btnedit ({ row }) {
      this.editshow = true
      // console.log(row.row.subjectName)
      this.editData.tagName = row.row.tagName
      this.editData.subjectName = row.row.subjectName
      this.editData.subjectID = row.row.subjectID
      this.editData.id = row.row.id
      console.log(this.editData)
    },
    // 修改数据
    async editsubject () {
      console.log(this)
      // console.log(this.subjectID)
      // console.log(this.editData)

      await updatetags(this.editData)
      this.$message.success('修改成功')
      this.getTageList()
      this.btnclear()
    },
    // 禁用启用按钮
    async btnState ({ row }) {
      if (row.row.state === 0) {
        this.state = 1
      } else {
        this.state = 0
      }
      this.changeStateList.state = this.state
      this.changeStateList.id = row.row.id

      // console.log(this.changeStateList)
      await changeState(this.changeStateList)
      this.$message.success('修改成功')
      console.log('修改-》', row.row)
      this.getTageList()
    },
    // 删除标签
    async btnremove (row) {
      try {
        await this.$confirm('确定删除吗？')
        await remove(row.row)
        this.$message.success('删除成功')
        this.getTageList()
      } catch (error) {
        console.log(error)
      }
    },
    // 跳转页面
    toPath () {
      this.$router.push({ path: '/subjects/list' })
    },
    btnClear () {
      this.searchList.tagName = ''
      this.searchList.state = ''
    }
  }
}
</script>

<style scoped lang='scss'>
.formtop {
  margin-top: 20px;
}
.from {
  display: flex;
  justify-content: space-between;
}

.icon {
  width: 100%;
  background: #f4f4f5;
  height: 42px;
  i {
    text-align: center;
    line-height: 42px;
    color: #909399;
  }
}
.page-Tool {
  text-align: end;
}
</style>
